<template>
  <div class="m-storagefeerules">
    <div class="top_item">
        <span>仓库编码:{{}}</span>
        <span>仓库名称:{{}}</span>
        <span>行政区:{{}}</span>
        <span>地址:{{}}</span>
        <span>服务品牌:{{}}</span>
        <span>服务门店:{{}}</span>
        <span>仓库商品:{{}}</span>
    </div>
    <div class="form_group">
      <el-dropdown>
        <span class="el-dropdown-link">
          状态<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>已使用</el-dropdown-item>
            <el-dropdown-item>未使用</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-input
        placeholder="请输入内容"
        suffix-icon="el-icon-search"
        v-model="state.input1"
        style="width: 150px"
        size="mini"
      >
      </el-input>

      <el-button
        type="primary"
        size="mini"
        style="float:right"
        @click="newStorageFeeRules"
        >新增</el-button
      >
    </div>
    <div class="table_group">
      <el-table
        :row-style="{ height: '40px' }"
        header-row-style="{height: '10px'}"
        :data="state.tableGroup"
        style="width: 100%"
        border
      >
        <el-table-column
          v-for="item in state.tableGroupClos"
          :prop="item.props"
          :key="item.index"
          :label="item.label"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #header>
            操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
          </template>
          <slot name="icon">
            <i class="el-icon-house" @click="house"></i>
            <i class="el-icon-truck" @click="truck"></i>
          </slot>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_group"></div>
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  setup(){
    let state = reactive({
      input1:"",
      tableGroup:[],
      tableGroupClos:[
        { props: "", label: "规则编号" },
        { props: "", label: "规则编码" },
        { props: "", label: "规则名称" },
        { props: "", label: "规则描述" },
        { props: "", label: "服务品牌" },
        { props: "", label: "状态" },
        { props: "", label: "创建时间" },
      ]
    });
    return{
      state
    }
  }
};
</script>

<style lang="less" scoped>
.m-storagefeerules {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-self: flex-start;
  align-content: center;
  .top_item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      flex: 1;
    }
  }
  .form_group {
    flex: 1;
  }
  .table_group {
    flex: 9;
  }
  .page_group {
    flex: 3;
  }
}
</style>
